<template>
	<transition name="slide">
		<div id="food" v-show="foodShow">
			<div class="img">
				<div class="return" @click="hide()"><<br></div>
				<img :src="food.image">

			</div>
			<div class="f-line">
				<div class="f-n">{{food.name}}</div>
				<div class="">￥{{food.price}}</div>
				<div class="cartcontrol"><cartcontrol :food="food"></cartcontrol></div>
			</div>
			<div class="f-line f-info" v-show="food.info"><span>商品介绍</span>{{food.info}}</div>
			<div class="f-line"></div>
		</div>
	</transition>
</template>

<script type="text/ecmascript-6">
/* eslint-disable  */
import cartcontrol from 'components/cartcontrol/cartcontrol.vue'

export default{
	props: {
		food: {
			type: Object
		}
	},
	data () {
		return {
			foodShow: false
		}
	},
	methods: {
		show () {
			this.foodShow = true
		},
		hide () {
			this.foodShow = false
		}
	},
	components: {
		cartcontrol
	}
}
</script>

<style>
#food {position: fixed; bottom: 0; background:#fff;height: 100%; width: 100%; box-shadow: rgba(7,17,27,.3) 0 0px 10px; left:0;  top: 0; background: #f7f7f7; font-family: "微软雅黑"}
.slide-enter-active {transition: all .7s ease;}
.slide-leave-active {transition: all .7s cubic-bezier(1.0, 0.5, 0.8, 1.0);}
.slide-enter, .slide-leave-active {transform: translateX(640px);}
#food .img{ width: 100%; position: relative; height: 300px; overflow: hidden;}
#food .img .return{position: absolute; color: #fff; background: rgba(7,17,27,0.5); width: 32px; height: 32px; line-height: 32px;text-align: center; border-radius: 50%; top: 15px; left: 15px;}
#food .img img{width: 100%;}
h1{font-weight: bold; text-align: center; font-size: 32px;}
#food .cartcontrol{ width: 100%; height: 20px;position: relative; }
.f-line{width: 94%;box-shadow: rgba(7,17,27,0.05) 2px 2px 2px; background: #fff;padding: 0 3%; margin-bottom: 16px;}
.f-n{color: #000; font-weight: bold; padding-top: 3%;}
.f-line.f-info{ padding: 18px 3%; color: rgba(77,85,93,1);font-size: 12px;line-height: 24px;}
.f-line.f-info span{display: block; font-size: 14px; color: #000;font-weight: bold;}
</style>
